<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="sports.js"></script>
</head>

<body>
    <div class="banner">
        <ul class="imgBox clearFix">

            <li style="background-color: red">1</li>
            <li style="background-color: orange">2</li>
            <li style="background-color: green">3</li>
            <li style="background-color: pink">4</li>
            <li style="background-color: yellow">5</li>

        </ul>

        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a href="javascript:;" class="left"> < </a> 
            <a href="javascript:;" class="right"> > </a>
        </div>
    </div>
</body>

</html>
<script src="common.js"></script>
<script>
    let index = 1;
    let timer;
    let flag = false;
    const imgBoxDom = document.querySelector(".imgBox");
    const bannerDom = document.querySelector(".banner");
    const pointBoxDom = document.querySelector(".pointBox");
    const leftRightTabsDom = document.querySelector(".leftRightTabs");
    const bannerWidth = bannerDom.clientWidth;
  
    //增加前后图片
    createLiTag();
    function createLiTag(){
        let firstLiClone = imgBoxDom.firstElementChild.cloneNode(true);
        let lastLiClone = imgBoxDom.lastElementChild.cloneNode(true);
        imgBoxDom.appendChild(firstLiClone);
        imgBoxDom.insertBefore(lastLiClone,imgBoxDom.firstElementChild);
        imgBoxDom.style.width = bannerWidth*(imgBoxDom.children.length)+'px'
        imgBoxDom.style.left = - bannerWidth + 'px'
    }
    //创建圆点
    createPoint();
    function createPoint(){
        for(let i = 0;i<imgBoxDom.children.length-2;i++){
            let point = document.createElement('li');
            i == 0 && (point.className='active');
            point.setAttribute('date-index',i);
            pointBoxDom.appendChild(point);
        }
    }
    //自动播放
    autoPlay();
    function autoPlay(){
        timer = setInterval(function(){
            index++;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd)
        },3000)
    }
    //播放循环
    function playEnd(){
        if(index <= 0){
            index = imgBoxDom.children.length-2;
        }
        if(index >= imgBoxDom.children.length-1){
            index = 1;
        }
        imgBoxDom.style.left = -index*bannerWidth+'px';
        for(let i = 0;i<pointBoxDom.children.length;i++){
            pointBoxDom.children[i].className='';
        }
        pointBoxDom.children[index-1].className = 'active';
        flag = false;
    }
      //圆点点击切换
      pointBoxDom.addEventListener('click',function(event){
        if(event.target.nodeName =='LI'){
            index = event.target.getAttribute('date-index')-0+1;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd);
        }
    })
    //箭头点击切换
    leftRightTabsDom.addEventListener('click',function(event){
        if(flag){
            return;
        }
        flag = true
        if(event.target.className == 'left'){
            index--;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd);
            console.log(imgBoxDom.style.left)
            // if(imgBoxDom.style.left='0px'){
            //     imgBoxDom.style.left = '-3000px'
            // }
        }
        if(event.target.className == 'right'){
            index++;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd);
        }
    })
    //鼠标划入划出
    bannerDom.addEventListener('mouseover',function(){
        clearInterval(timer);
    })
    bannerDom.addEventListener('mouseout',function(){
        autoPlay();
    })
</script>